<template>
	<view class="reply">
		<view class="left">
			<u-avatar :src="avatar"></u-avatar>
		</view>
		<view class="right">
			<text style="font-size: 30rpx; color: hotpink;">{{nickname}}</text>
			<view class="center">
				<text>{{comments}}</text>
			</view>
			<view class="buttom-info">
				<text style="color: #8A8A8A;font-family: '宋体';">{{gettime}}</text>
				<view class="like">
					<u-icon @click="addlike" :color="islike ? 'red':''" name="thumb-up" size="20"></u-icon>
					<text>{{nums}}</text>
				</view>
				<view class="repeadtwo" @click="landlord">
					{{titol}}回复
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import {
		formatDate
	} from "@/utils/time.js"
	export default {
		name: "reply-item",
		data() {
			return {
				titol: 0,
				numbers: 0,
				islike: false,
				likelist: [],
				user_id: '',
				nums:0
			};
		},
		watch: {
			video_id: {
				immediate: true,
				handler() {
				
				}
			},
			item: {
				immediate: true,
				handler() {
					
				}
			},
			repleyid:{
				immediate:false,
				handler(){
					let tempid=this.repleyid.split('.')[0]
					if(tempid==this.item._id){
						this.titol=this.titol+1
					}
				}
			}


		},
		props: ['item', 'video_id', 'commentid','repleyid'],
		mounted() {
			this.getislike()
			this.getnumber()
			this.getlikenumebr()
			this.user_id = uniCloud.getCurrentUserInfo().uid
		},
		onLoad() {


		},
		computed: {
			avatar() {
				if (this.item.user_id && this.item.user_id[0].avatar) {
					return this.item.user_id[0].avatar
				} else {
					return ''
				}
			},
			nickname() {
				if (this.item.user_id && this.item.user_id[0].nickname) {
					return this.item.user_id[0].nickname
				} else {
					return ''
				}
			},
			comments() {
				if (this.item.comment_content) {
					return this.item.comment_content
				} else {
					return ''
				}
			},
			gettime() {
				if (this.item.comment_date) {
					return formatDate(this.item.comment_date, 1)
				}
			},

		},
		methods: {
			//回复楼主
			landlord() {
				this.$emit('golandlord', this.item)

			},
			async getnumber() {
				await db.collection('criticism').where({
					video_id: this.video_id,
					reply_comment_id: this.item._id,
					comment_type: 1

				}).count().then(res => {

					this.titol = res.result.total
				})
			},
			async addlike() {
				this.islike = !this.islike
					
				if(this.islike){
					this.nums=this.nums+1
				}else{
					this.nums=this.nums-1
				}
				await db.collection('criticism').where({
					_id: this.item._id
				}).get().then(async res => {
					
					this.likelist = res.result.data[0].like_count
				
					if (this.likelist.indexOf(this.user_id) == -1) {
						this.likelist.push(this.user_id)
						db.collection('criticism').where({
							'_id': this.item._id
						}).update({
							like_count: this.likelist
						}).then(res => {
							
						})

					} else {
						this.likelist.splice(this.likelist.indexOf(this.user_id), 1)
						await db.collection('criticism').where({
							'_id': this.item._id
						}).update({
							like_count: this.likelist
						}).then(res => {
						
						})
					}


				})

			},
			//获取是否点赞
			async getislike() {
				await db.collection('criticism').where({
					'_id': this.item._id
				}).get().then(res => {

					let likes = res.result.data[0].like_count
					this.nums=likes.length
					if (likes.indexOf(this.user_id) != -1) {
						this.islike = true
					} else {
						this.islike = false
					}
				})
			},

			async getlikenumebr() {
				await db.collection('criticism').where({
					'_id': this.item._id
				}).count().then(res => {
				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reply {
		color: #c2d5ff;
		padding: 20rpx;
		height: 17vh;
		display: flex;
		border-bottom: 2px solid #283b65;

		.right {

			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100%;

			.center {
				margin-top: 20rpx;
				font-family: YouYuan;
				// background-color: #283b65;
				// padding: 10rpx;
				font-size: 30rpx;
				width: 100%;

				// height: 8vh;
				text {
					width: 100%;
					height: 100%;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 30rpx;
				}
			}

			.buttom-info {
				position: relative;
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;

				.like {
					font-size: 10rpx;
					display: flex;
					align-items: center;

					text {
						font-size: 25rpx;
					}
				}

				.repeadtwo {
					position: absolute;
					bottom: 0px;
					left: 35%;
					font-size: 25rpx;
				}
			}
		}
	}
</style>